<template>
    <div class="border" style="margin:0 5px">
        <div class="show-num ">
            <span v-show="type == 'history'" style="margin-right:10px">
                同步时间：
                <el-date-picker v-model="historyParam.date" size="mini" type="date" placeholder="选择日期"> </el-date-picker>
                <el-input v-model="historyParam.idName" size="mini" style="width:220px;margin:0 10px" placeholder="编号/名称"></el-input>
                <el-button type="primary" size="mini" @click="query">查询</el-button>
            </span>
            <span v-show="name.syncParam.dynamicETL">
                导数结果：<span style="el-color: red "
                    >{{ typeof syncResult.etlResult === 'boolean' ? (syncResult.etlResult ? '成功' : '失败') : null }} &nbsp;&nbsp;
                </span>
            </span>
            同步数量：<span style="color:red">{{ syncResult.totalAmount }} &nbsp;&nbsp;</span> 成功数量：<span style="color:red"
                >{{ syncResult.successAmount }} &nbsp;&nbsp;</span
            >
            失败数量：<span style="color:red">{{ syncResult.errorAmount }}</span>
        </div>
        <el-row>
            <el-col :span="12" class="content">
                <div class="content-header">成功维度：</div>
                <RiskTable :msg="successMsg"></RiskTable>
                <!-- <el-table border :data="successDataSource" class="risk-el-table risk-el-table-body-font" :height="showHeight" style="overflow:auto">
                    <el-table-column label="编号" prop="entryCode" width="80" show-overflow-tooltip></el-table-column>
                    <el-table-column label="名称" prop="entryName" show-overflow-tooltip></el-table-column>
                </el-table> -->

                <RiskPagination :paging="successPage" @page-change="successPageChange" v-show="syncResult.successAmount > 0"></RiskPagination>
            </el-col>
            <el-col :span="12" class="content">
                <div class="content-header">失败维度：</div>
                <RiskTable :msg="errorMsg"></RiskTable>
                <RiskPagination :paging="errorPage" @page-change="errorPageChange" v-show="syncResult.errorAmount > 0"></RiskPagination>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
import RiskPagination from '@/common/components/risk-pagination.vue';
import RiskTable from '@/common/components/risk-table.vue';
import { getSyncDataDetailItem } from '@/pages/system-maintence/api';
import { getCurrentPageData } from '@/utils/tools';
import { Component, Prop, Vue } from 'vue-property-decorator';
export interface pages {
    currentPage?: number;
    pageSize?: number;
    total?: number;
}
@Component({
    name: 'DynamicSyncContent',
    components: {
        RiskPagination,
        RiskTable,
    },
})
export default class DynamicSyncContent extends Vue {
    @Prop() type: string;
    @Prop({
        default: () => {
            return {
                syncParam: {
                    dynamicCode: '',
                    importType: '1',
                    dynamicETL: false,
                    sourceType: '2',
                },
                errorMessage: {},
            };
        },
    })
    name;
    historyParam: any = {
        date: '',
        idName: '',
    };
    showHeight: string = 'calc(100vh - 250px)';
    columns = [
        { name: '编号', val: 'code', filters: [{ data: '' }], search: true },
        { name: '名称', val: 'name', filters: [{ data: '' }], search: true },
        { name: '同步类型', val: 'syncCategory' },
        { name: '同步时间', val: 'syncDate' },
    ];

    successMsg: any = {
        returnData: {
            list: [
                {
                    entryCode: '122',
                    entryName: 'name',
                },
                {
                    entryCode: '122',
                    entryName: 'name',
                },
            ],
        },
        dataKey: 'list',
        title: this.columns,
        checked: { on: false, option: false },
        hidePage: true,
    };
    errorMsg: any = {
        returnData: {
            list: [
                {
                    entryCode: '122',
                    entryName: 'name',
                },
                {
                    entryCode: '122',
                    entryName: 'name',
                },
            ],
        },
        dataKey: 'list',
        title: this.columns,
        checked: { on: false, option: false },
        hidePage: true,
    };
    // 成功条目
    private successDataSource: any = [];
    // 失败条目
    private errorDataSource: any = [];
    private errorMessage: string = '';
    private syncResult: any = {
        totalAmount: '',
        successAmount: '',
        successEntry: '',
        errorAmount: '',
        errorDynamic: '',
        errorMsg: '',
        etlResult: '',
    };

    private syncLoading: boolean = false;

    private successDataSourceList: any[] = [];
    private errorDataSourceList: any[] = [];
    // todo   改成后端分页
    private successPage: pages = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };

    private errorPage: pages = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };

    searchParams: any = {
        batchId: '',
        isNew: '',
        syncCategory: '1', // 1 条目同步 0 动态维度同步
        syncStatus: '', // 1 成功  0 失败
    };
    pagingError = {
        currentPage: 1,
        pageSize: 10,
    };
    pagingSuccess = {
        currentPage: 1,
        pageSize: 10,
    };
    batchId: string = '';
    // 同步
    private handleClickSync(batchId: string, syncStatus: any): void {
        let syncParam = JSON.parse(JSON.stringify(this.searchParams));
        syncParam.batchId = batchId;
        this.batchId = batchId;
        this.syncLoading = true;
        this.cleanLastResult();
        syncParam.isNew = this.type == 'current' ? '1' : '0'; // 0 历史 1最新
        syncParam.syncStatus = syncStatus;
        // 0 失败  1 成功
        if (syncStatus == '0') {
            syncParam.paging = this.pagingSuccess;
        } else {
            syncParam.paging = this.pagingSuccess;
        }

        getSyncDataDetailItem(syncParam).then(
            (res: any) => {
                if (res) {
                    if (syncStatus == '0') {
                        this.$set(this.errorMsg.returnData, 'list', res.list);
                    } else {
                        this.$set(this.successMsg.returnData, 'list', res.list);
                    }
                }
                this.syncLoading = false;
            },
            () => {
                this.syncLoading = false;
            }
        );
    }

    //  同步之前清空 之前的的同步结果
    private cleanLastResult(): void {
        this.syncResult = {
            totalAmount: '',
            successAmount: '',
            successEntry: '',
            errorAmount: '',
            errorDynamic: '',
            errorMsg: '',
            etlResult: '',
        };
        this.successDataSourceList = [];
        this.errorDataSourceList = [];
        this.successDataSource = [];
        this.errorDataSource = [];
        this.errorMessage = '';
    }

    // 显示全部
    private handleShowAllLog(): void {
        this.errorMessage = this.syncResult.errorMsg;
    }

    // 双击错误行事件
    private handleClickRow(record): void {
        this.errorMessage = this.name.errorMessage[record.entryCode];
    }

    // 成功分页
    private successPageChange(curpage?: number) {
        if (curpage) {
            this.successPage.currentPage = curpage;
        }
        this.successPage.total = this.successDataSourceList.length;
        this.successDataSource = getCurrentPageData(this.successDataSourceList, this.successPage.currentPage, this.successPage.pageSize);
    }

    // 失败分页
    private errorPageChange(curpage?: number) {
        if (curpage) {
            this.errorPage.currentPage = curpage;
        }
        this.errorPage.total = this.errorDataSourceList.length;

        this.errorDataSource = getCurrentPageData(this.errorDataSourceList, this.errorPage.currentPage, this.errorPage.pageSize);
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-table td,
/deep/ .el-table th {
    padding: 5px 0;
}
.content {
    border-right: 1px solid rgb(202, 202, 202);
    height: calc(100vh - 170px);
    .content-header {
        height: 35px;
        line-height: 30px;
        padding: 3px;
    }
}
.border {
    border: 1px solid rgb(202, 202, 202);
}
.show-num {
    padding: 5px;
    border-bottom: 1px solid rgb(202, 202, 202);
    font-weight: 700;
    height: 43px;
    line-height: 31px;
}
</style>
